<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/react.development.js"></script>
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        class Increase extends React.Component{
            // 生命周期方法，在组件初始化的时候执行，只执行一次
            constructor(props){
                super(props);
                this.state = {
                    iNum:10
                }

                console.log('------constructor------')
            }

            fnAdd=()=>{
               this.setState(state=>({iNum:state.iNum+1})) 
            }

            // 生命周期方法，在每次组件更新之前且在render方法之前执行
            // 它内部需要返回一个布尔值来决定组件是否更新
            shouldComponentUpdate(){
                console.log('------shouldComponentUpdate------')
                return true
            }

            // 生命周期方法，在组件初始化的时候且在constructor执行
            // 在组件每次更新之前也会执行
            render(){
                console.log('------render------')
                return (
                    <div>
                        <p>{ this.state.iNum }</p>
                        <input type="button" value="递增" onClick={this.fnAdd} />
                    </div>
                )
            }

            // 生命周期方法，在组件每次更新之后会执行
            componentDidUpdate(){
                console.log('------componentDidUpdate------')
            }

            // 生命周期方法，在组件挂载到页面之后执行，只执行一次
            componentDidMount(){
                console.log('------componentDidMount------') 
            }

            // 生命周期方法，在组件卸载之前会执行的方法，只执行一次
            componentWillUnmount(){
                console.log('------componentWillUnmount------')
            }


        }

        ReactDOM.render(<Increase />,document.getElementById("root"));
        setTimeout(()=>{
            ReactDOM.render(<h2>Bye-Bye!</h2>,document.getElementById("root"));
        },3000)


    </script>
</body>
</html>